<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "components": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_layout": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_layout": "active",
      "index": "active",
      "urlPrefix": "."
      })
    </div><!-- component-sidebar -->

    <div class="component-content">
      <div class="component-content-header">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb breadcrumb-style1 mg-b-0">
            <li class="breadcrumb-item"><a href="#">Components</a></li>
            <li class="breadcrumb-item active" aria-current="page">Introduction</li>
          </ol>
        </nav>
        <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
      </div><!-- component-content-header -->

      <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
        <div class="content content-components">
          <div class="container">
            <!--sd-->
            <h1 class="td-title">Introduction</h1>
            <p class="td-lead">Get started with over a dozen reusable components built on top of Bootstrap with styles
              enhancement and additional components and options.</p>

            <hr class="mg-y-40">

            <h4 id="section1" class="mg-b-10">我的应用</h4>
            <div class="row">
              <div class="col-6">
                <div class="pos-relative"></div>
                <div class="media align-items-stretch mg-b-20">
                  <div class="media-body bg-ui-03 pd-10">
                    <a href="https://gitee.com/ruyangit/tangdao">
                      <img src="../doc/home.jpg" class="img-fit-cover img-object-left" alt="">
                    </a>
                  </div>
                </div>
                <h6 class="tx-18">Classic <span class="tx-color-03 tx-normal">(Default Theme)</span></h6>
              </div><!-- col -->
              <div class="col-6">
                <div class="pos-relative">
                  <div class="media align-items-stretch mg-b-20">
                    <div class="media-body bg-ui-03 pd-10">
                      <a href="https://gitee.com/ruyangit/tangdao-microservices">
                        <img src="../doc/role-user.jpg" class="img-fit-cover img-object-left" alt="">
                      </a>
                    </div>
                  </div><!-- media -->
                </div>
                <h6 class="tx-18">Classic Plus <span class="tx-color-03 tx-normal">(Charcoal Theme)</span></h6>
              </div><!-- col -->
              <div class="col-6 mg-t-30">
                <div class="ht-300 bg-ui-03 mg-b-20 d-flex align-items-center justify-content-center">
                  <h6 class="tx-uppercase tx-white mg-b-0">More Coming Soon</h6>
                </div>
                <h6 class="tx-18">More Coming Soon</h6>
              </div><!-- col -->
            </div><!-- row -->
            @@include('./footer.html',{})
            <!-- content-footer -->
          </div>
        </div>
      </div><!-- component-content-body -->

      <div class="component-content-sidebar section-nav">
        <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
        <nav id="navSection" class="nav flex-column">

        </nav>
      </div><!-- component-content-sidebar -->
    </div><!-- component-content -->

  </div><!-- component-wrapper -->

  @@include('./_script.html',{})

  <script>
    $(function () {
      'use strict'
    });
  </script>
</body>

</html>